<template>
  <el-autocomplete
      popper-class="order-autocomplete"
      v-model.lazy="val"
      placeholder="中文"
      :fetch-suggestions="querySearchAsync"
      clearable
      @select="select"
      @clear="clear">
    <template slot-scope="{item}">
      <div style="display: flex;justify-content: space-between;margin-bottom: 5px" v-show="item.id">
        <div class="name">{{item.value}}</div>
        <el-button type="danger" size="mini" @click.stop="hiddenOrder(item)">删除</el-button>
      </div>
    </template>
  </el-autocomplete>
</template>

<script>
  import {listByNameApi, hiddenOrderApi} from '@/api/order'

  export default {
    name: "InputSelectEnd",
    props: {
      value: {
        type: String
      },
      that: {
        type: Object
      }
    },
    data() {
      return {
        val: ''
      }
    },
    watch: {
      value(val, old) {
        if (val && !old) { // 第一次输入执行
          this.val = val;
        }
        if (!val && this.val) { // 只有外边清空才执行
          this.val = '';
        }
      }
    },
    methods: {
      hiddenOrder(obj) {
        hiddenOrderApi({id: obj.id}).then(result => {
          if (result.status === 200) obj.id = 0
        })
      },
      clear() {
        let _this = this.that;
        _this.form.receiverName = ''; // 收件人姓名
        _this.form.laosReceiverName = '';
        _this.form.endPlace = ''; // 目的地
        _this.form.laosEndPlace = '';
        _this.form.receiverCompanyName = ''; // 收件单位名称
        _this.form.laosReceiverCompanyName = '';
        _this.form.receiverAddress = ''; // 收件人详细地址
        _this.form.laosReceiverAddress = '';
        _this.form.receiverPhone = ''; // 收件人联系电话
        _this.form.receiverId = ''; // 收件人证件号
      },
      set(obj) {
        let _this = this.that;
        _this.form.receiverName = obj.receiverName; // 收件人姓名
        _this.form.laosReceiverName = obj.laosReceiverName;
        _this.form.endPlace = obj.endPlace; // 目的地
        _this.form.laosEndPlace = obj.laosEndPlace;
        _this.form.receiverCompanyName = obj.receiverCompanyName; // 收件单位名称
        _this.form.laosReceiverCompanyName = obj.laosReceiverCompanyName;
        _this.form.receiverAddress = obj.receiverAddress; // 收件人详细地址
        _this.form.laosReceiverAddress = obj.laosReceiverAddress;
        _this.form.receiverPhone = obj.receiverPhone; // 收件人联系电话
        _this.form.receiverId = obj.receiverId; // 收件人证件号
      },
      select(val) {
        this.val = val.receiverName;
        this.$emit('input', val.receiverName);
        this.$parent.$emit('el.form.change');
        this.set(val);
      },
      querySearchAsync(query, cb) {
        this.$emit('input', query);
        this.$parent.$emit('el.form.change');
        if (query) {
          let data = {
            senderName: '',
            receiverName: query
          };
          listByNameApi(data).then(result => {
            result.resultParam.expressOrderList.forEach(item => {
              item.value = item.receiverName + " --- " + item.receiverPhone
            })
            let arr = result.resultParam.expressOrderList
            /* 去重 */
            // for (let i = 0; i < arr.length; i++) {
            //   for (let j = i + 1; j < arr.length; j++) {
            //     if (arr[i].receiverName === arr[j].receiverName && arr[i].receiverPhone === arr[j].receiverPhone) {
            //       arr.splice(j, 1);
            //       j--;
            //     }
            //   }
            // }
            /* 去重 */
            cb(arr)
          })
        } else {
          cb([])
        }
      }
    }
  }
</script>

<style lang="scss">
  .order-autocomplete {
    width: 275px !important;
  }
</style>
